<template>
  <el-drawer :append-to-body="true" title="发起人" v-model="visible" custom-class="set_promoter" :show-close="false" :size="550" :before-close="savePromoter">
    <div class="drawer_content">
      <div class="promoter_content">
        <el-radio-group v-model="flowPermission.initiatorType" class="clear" @change="changeType">
          <el-radio v-for="{ value, label } in promoterTypes" :key="value" :label="value">{{ label }}</el-radio>
        </el-radio-group>
        <div>
          <el-button type="primary" @click="addPromoter" v-if="flowPermission.initiatorType == 'user'">添加/修改成员</el-button>
          <el-button type="primary" @click="addPromoter" v-if="flowPermission.initiatorType == 'role'">添加/修改角色</el-button>
          <el-button type="primary" @click="addPromoter" v-if="flowPermission.initiatorType == 'depart'">添加/修改部门</el-button>
        </div>
        <p class="selected_list" v-if="['user', 'role', 'depart'].includes(flowPermission.initiatorType)">
          <el-tag v-for="(item, index) in flowPermission.users" :key="index" closable @close="handleRemove('user', item)">{{ operatorMapping.user[item] }}</el-tag>
          <el-tag v-for="(item, index) in flowPermission.departs" :key="index" type="success" closable @close="handleRemove('depart', item)">{{ operatorMapping.depart[item] }}</el-tag>
          <el-tag v-for="(item, index) in flowPermission.roles" :key="index" type="warning" closable @close="handleRemove('role', item)">{{ operatorMapping.role[item] }}</el-tag>
          <el-button v-if="operatorLength != 0" link type="primary" @click="handleClear">清除</el-button>
        </p>
      </div>
    </div>
    <template #footer>
      <div class="drawer-footer">
        <el-button type="primary" @click="savePromoter">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </template>
    <EmployeesDialog v-model:visible="promoterVisible" :users="checkedUserList" :departs="checkedDepartList" :roles="checkedRoleList" :assigneeType="flowPermission.initiatorType" @change="surePromoter" />
  </el-drawer>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'
import { promoterTypes } from '@/utils/flowConst'

let store = useStore()
let flowPermission = ref([]) // 临时存储，避免用户选择了但没有点击确定按钮关闭弹窗
let promoterVisible = ref(false)
const operatorMapping = computed(() => store.state.flow.operatorMapping)
let flowPermission1 = computed(() => store.state.flow.flowPermission1) // 每次进入发起人设置弹窗时，会设置回显已选用户或角色
let operatorLength = computed(() => flowPermission.value.users?.length + flowPermission.value.departs?.length + flowPermission.value.roles?.length) // 已选择人员数量
let visible = computed({
  get() {
    return store.state.flow.promoterDrawer
  },
  set() {
    closeDrawer()
  }
})
watch(flowPermission1, val => {
  flowPermission.value = val.value
})

// 切换发起人类型
const changeType = () => {
  flowPermission.value.users = []
  flowPermission.value.departs = []
  flowPermission.value.roles = []
}

// 已选择
const checkedUserList = ref([])
const checkedDepartList = ref([])
const checkedRoleList = ref([])
const addPromoter = () => {
  const { users, roles, departs } = flowPermission.value
  checkedUserList.value = users
  checkedDepartList.value = departs
  checkedRoleList.value = roles
  promoterVisible.value = true
}

// 移除已选择
const handleRemove = (type, id) => {
  if (type == 'user') {
    flowPermission.value.users = flowPermission.value.users.filter(item => item != id)
  } else if (type == 'depart') {
    flowPermission.value.departs = flowPermission.value.departs.filter(item => item != id)
  } else if (type == 'role') {
    flowPermission.value.roles = flowPermission.value.roles.filter(item => item != id)
  } else if (type == 'nobody') {
    flowPermission.value.nobodyUsers = flowPermission.value.nobodyUsers.filter(item => item != id)
  }
}

// 清空已选择
const handleClear = () => {
  flowPermission.value.users = []
  flowPermission.value.departs = []
  flowPermission.value.roles = []
}

const surePromoter = (users, departs, roles) => {
  flowPermission.value.users = users
  flowPermission.value.departs = departs
  flowPermission.value.roles = roles
  promoterVisible.value = false
}
const savePromoter = () => {
  if (operatorLength.value === 0) {
    flowPermission.value.initiatorType = 'everyone'
  }
  store.commit('flow/setFlowPermission', {
    value: flowPermission.value,
    flag: true,
    id: flowPermission1.value.id // uuid
  })
  closeDrawer()
}
const closeDrawer = () => {
  store.commit('flow/setPromoter', false)
}
</script>

<style lang="scss" scoped>
.set_promoter {
  .promoter_content {
    .el-radio-group {
      display: unset;
    }
    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
    .el-button:not(.is-link) {
      margin-bottom: 20px;
    }
  }
}
</style>
